<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>HA Monitor</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="//cdn.staticfile.org/layui/2.8.17/css/layui.css" rel="stylesheet">
</head>
<body>
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo layui-hide-xs layui-bg-black">HA Monitor</div>
    <!-- 头部区域（可配合layui 已有的水平导航） -->
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item layui-hide layui-show-sm-inline-block">
        <a href="javascript:;">
          <img src="../profile.png" class="layui-nav-img">
          tester
        </a>
        <dl class="layui-nav-child">
          <dd><a href="javascript:;">Your Profile</a></dd>
          <dd><a href="javascript:;">Settings</a></dd>
          <dd><a href="javascript:;">Sign out</a></dd>
        </dl>
      </li>
      <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
        <a href="javascript:;">
          <i class="layui-icon layui-icon-more-vertical"></i>
        </a>
      </li>
    </ul>
  </div>
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <ul class="layui-nav layui-nav-tree"  lay-filter="test">
        <li class="layui-nav-item layui-nav-itemed">
          <a class="" href="javascript:;">语句操作</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;">查询语句</a></dd>
            <dd><a href="javascript:;">修改语句</a></dd>
            <dd><a href="javascript:;">增加语句</a></dd>
            <dd><a href="javascript:;">删除语句</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">官方文档</a>
          <dl class="layui-nav-child">
            <dd><a id=btn1 >Pacemaker</a></dd>
            <dd><a id=btn2 >Corosync</a></dd>
            <dd><a id=btn3 >Flask</a></dd>
          </dl>
        </li>
      </ul>
    </div>
  </div>


<div class="layui-body layui-layout-middle">
  <!-- 内容主体区域 -->
  <div style="padding: 15px;">
    <blockquote class="layui-elem-quote layui-text">
      请先完成节点鉴权
    </blockquote>
    <div class="layui-card layui-panel" >
      <div class="layui-card-header">
        以下命令请切换至管理员模式下运行
      </div>
      
      <table class="layui-table" lay-filter="test">
        <colgroup>
          <col width="150">
          <col width="150">
          <col>
        </colgroup>
        <thead>
          <tr>
            <th>描述</th>
            <th>命令</th>
          </tr> 
        </thead>
        
        <tbody>
          {% for p in data %}
          <tr>
            <td>{{ p.description }}</td>
            <td>{{ p.statement }}<button type="button" id="exe_btn" lay-active="exe" lay-event="exeucte" style="float:right" data-id={{p.id}} class="layui-btn layui-btn-sm">执行</button></td>
          </tr>
          {% endfor %}
        </tbody>
      </table>

    
    </div>
    <br><br>
  </div>
</div>
<div class="layui-footer">
  <!-- 底部固定区域 -->
  openEuler HA Monitor
</div>
</div>


<form id="exe_layer" class="layui-form" hidden>
  <div class="layui-col-md10" style="padding-top: 1rem">
    <div class="layui-form-item">
      <div class="layui-input-group">
        <div class="layui-input-split layui-input-prefix">
          是否执行
        </div>
        <!-- <input type="text" placeholder="带任意前置和后置内容" class="layui-input"> -->
        <div class="layui-input-wrap">
          <input type="text" value="aaa" lay-affix="clear" class="layui-input">
        </div>
        <div class="layui-input-suffix">
          <button class="layui-btn layui-btn-primary">是</button>
        </div>
      </div>
    </div>
  </div>
</form>
 
<script src="//cdn.staticfile.org/layui/2.8.17/layui.js"></script>
<script>
layui.use(['element', 'layer', 'util','form','table'], function(){
  var element = layui.element;
  var table = layui.table;
  var layer = layui.layer;
  var util = layui.util;
  var $ = layui.$;
  
  //头部事件
  util.event('lay-header-event', {
    menuLeft: function(othis){ // 左侧菜单事件
      layer.msg('展开左侧菜单的操作', {icon: 0});
    },
    menuRight: function(){  // 右侧菜单事件
      layer.open({
        type: 1,
        title: '更多',
        content: '<div style="padding: 15px;">处理右侧面板的操作</div>',
        area: ['260px', '100%'],
        offset: 'rt', // 右上角
        anim: 'slideLeft', // 从右侧抽屉滑出
        shadeClose: true,
        scrollbar: false
      });
    }
  });
  util.event('lay-active', {
    exe: function(othis){
      id = othis.context.dataset.id;
      console.log(id);

      layer.open({
        type: 2,
        // content: '/statement/'+id,
        content: '/pacemaker/'+id,
        // content: $('#exe_layer'),
        area: ['500px', '500px']
      })
    }
	
  });
  $("#btn1").click(function(){
    layer.open({
      type: 2,
      area: ['580px', '90%'],
      content: "https://www.clusterlabs.org/pacemaker/doc/" //iframe的url
    });   
  });
  $("#btn2").click(function(){
    layer.open({
      type: 2,
      area: ['580px', '90%'],
      content: "https://corosync.github.io/corosync/" //iframe的url
    });   
   
  });
  $("#btn3").click(function(){
    //input here
    layer.open({
      type: 2,
      area: ['580px', '90%'],
      content: "https://flask.palletsprojects.com/en/2.3.x/" //iframe的url
    });   
  });
});
</script>
</body>
</html>
